<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>分类管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/static/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
    <link rel="stylesheet" href="/static/css/public.css" media="all">

</head>
<body>


<div class="layuimini-container">
    <div class="layuimini-main">
        <div style="display: flex;align-items: center">
            <div class="layui-btn-group">
                <button class="layui-btn" id="btn-expand">全部展开</button>
                <button class="layui-btn layui-btn-normal" id="btn-fold">全部折叠</button>
            </div>
            <div style="margin-left: 50px;display: flex;align-items: center">
                <input type="text" id="name"
                       style="display: inline-block;width: 150px;margin-right: 5px"
                       placeholder="新增标签"
                       autocomplete="off"
                       class="layui-input">
                <button class="layui-btn" onclick="addCategory()">新增</button>
            </div>
        </div>
        <table id="munu-table" class="layui-table" lay-filter="munu-table"></table>
    </div>
</div>


<!-- 操作列 -->
<script type="text/html" id="auth-state">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="add">添加</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
</script>


<script src="/static/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="/static/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script>
    let $$ = null
    layui.use(['table', 'treetable'], function () {
        let $ = $$ = layui.jquery,
            table = layui.table,
            form = layui.form,
            treetable = layui.treetable;

        // 渲染表格
        layer.load(2);
        treetable.render({
            treeColIndex: 1,
            treeSpid: -1,
            treeIdName: 'categoryId',
            treePidName: 'parentId',
            treeDefaultClose: true,
            elem: '#munu-table',
            url: '/common/category',
            page: false,
            cols: [
                [
                    {type: 'numbers'},
                    {field: 'name', minWidth: 200, title: '分类名称'},
                    {field: 'level', title: '层级'},
                    {templet: '#auth-state', width: 200, align: 'center', title: '操作'}
                ]
            ],
            done: function () {
                layer.closeAll('loading');
            }
        });


        $('#btn-expand').click(function () {
            treetable.expandAll('#munu-table');
        });

        $('#btn-fold').click(function () {
            treetable.foldAll('#munu-table');
        });


        //监听工具条
        table.on('tool(munu-table)', function (obj) {
            let layEvent = obj.event;
            let data = obj.data;
            if (layEvent === 'add') {
                let parentId = data.categoryId
                let level = data.level
                layer.prompt({
                    formType: 2,
                    title: "新增分类",
                    value: ""
                }, function (value, index) {
                    $.ajax({
                        type: "post",
                        url: "/category/save",
                        dataType: "json",
                        data: JSON.stringify({"parentId": parentId, "name": value, "level": level + 1}),
                        contentType: "application/json;charset=UTF-8",
                        success: function (data) {
                            if (data.code === 200) {
                                layer.msg('新增成功', {icon: 1});
                                layer.close(index);
                                setTimeout(() => {
                                    location.reload();
                                }, 1000)
                            } else {
                                layer.msg(data.msg, {icon: 5});
                            }
                        }
                    });

                });
            } else if (layEvent === 'del') {
                layer.confirm('确认要删除吗？', {
                    btn: ['确定', '取消']//按钮
                }, function (index) {
                    $.ajax({
                        type: "post",
                        url: "/category/delete/" + data.categoryId,
                        dataType: "json",
                        contentType: "application/json;charset=UTF-8",
                        success: function (data) {
                            if (data.code === 200) {
                                layer.msg('删除成功', {icon: 1});
                                layer.close(index);
                                setTimeout(() => {
                                    location.reload();
                                }, 1000)
                            } else {
                                layer.msg(data.msg, {icon: 5});
                            }
                        }
                    });

                });
            } else if (obj.event === 'edit') {
                let categoryId = data.categoryId
                layer.prompt({
                    formType: 2,
                    title: "修改名称",
                    value: data.name
                }, function (value, index) {

                    $.ajax({
                        type: "post",
                        url: "/category/update",
                        dataType: "json",
                        data: JSON.stringify({"categoryId": categoryId, "name": value}),
                        contentType: "application/json;charset=UTF-8",
                        success: function (data) {
                            if (data.code === 200) {
                                layer.msg('修改成功', {icon: 1});
                                layer.close(index);
                                setTimeout(() => {
                                    location.reload();
                                }, 1000)
                            } else {
                                layer.msg(data.msg, {icon: 5});
                            }
                        }
                    });


                });

            }

        });


    });

    function addCategory() {
        let name = $$("#name").val()
        if (name == "") {
            layer.msg("请输入内容", {icon: 5});
            return;
        } else if (name.length > 30) {
            layer.msg("分类名称过长,请设置为30字符以内", {icon: 5});
            return;
        }
        $$.ajax({
            type: "post",
            url: "/category/save",
            dataType: "json",
            data: JSON.stringify({"parentId": -1, "name": name, "level": 1}),
            contentType: "application/json;charset=UTF-8",
            success: function (data) {
                if (data.code === 200) {
                    layer.msg('新增成功', {icon: 1});
                    setTimeout(() => {
                        location.reload();
                    }, 1000)
                } else {
                    layer.msg(data.msg, {icon: 5});
                }
            }
        });
    }

</script>
</body>
</html>
